import React from 'react';
import IconButton from '@material-ui/core/IconButton';
import Paper from '@material-ui/core/Paper';
import Divider from '@material-ui/core/Divider';
import {observer, inject} from "mobx-react";
import {reaction} from "mobx";
import '../../style/MsgBox.less'

@inject("emojiStore")
@observer
class MsgBox extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: "",
            isExpression: false,
        }
        this.input = React.createRef();
        this.reaction = null;

    }

    componentDidMount(): void {
        //监听mobx 变化
        // autorun(() => {
        //
        // })
        reaction(
            () => this.props.emojiStore.emoji,
            (emoji, reaction) => {
                this.setState({
                    value: this.state.value + emoji
                })
                this.reaction=reaction;
            }
        )
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }

    componentWillUnmount(): void {
        if( this.reaction!=null){
            this.reaction.dispose();
        }
    }

    render() {

        return (
            <div className="MsgBox">
                <Paper className="root">
                    <textarea
                        onChange={this.handleChange.bind(this)}
                        className="input"
                        placeholder=""
                        value={this.state.value}
                        ref={this.input}
                        // onFocus={()=>{
                        //
                        // }}
                        onClick={() => {
                            console.log("onClick");
                            this.props.onClick();
                            this.setState({
                                isExpression: false,
                            });
                        }}
                    />
                    <Divider className="divider" orientation="vertical"/>
                    <IconButton
                        onClick={() => {
                            this.props.onExpression(!this.state.isExpression)
                            this.setState({
                                isExpression: !this.state.isExpression,
                            });

                        }}
                        color="primary" className="iconButton" aria-label="directions">
                        <i className="iconfont">&#xe617;</i>
                    </IconButton>
                    <IconButton onClick={() => {
                        if (this.state.value !== "") {
                            this.props.onSubmit(this.state.value)
                        }
                        this.setState({
                            value: "",
                        });
                        this.input.current.scrollIntoView();
                        this.input.current.focus();
                    }} type="submit" className="iconButton" aria-label="search">
                        <label>发送</label>
                    </IconButton>
                </Paper>
            </div>
        )
    }
}

export default MsgBox
